<template>
  <div>
    <div>
      <el-button type="primary" size="mini" @click="saveJson">保存</el-button>
      <el-button type="danger" size="mini" @click="clean">清空</el-button>
      <el-button type="primary" size="mini" @click="reful">刷新</el-button>
    </div>
    <div class="er-editor-demo-container">
      <div
        id="refContainer"
        ref="refContainer"
        style="width: 100%; height: 100%"
      />
    </div>
  </div>
</template>
<script>
const LINE_HEIGHT = 250;
import BaseGraph from "./xflow";
import { mockEntityData, mockRelationData } from "./data/mock";
import Entity from "./content/Entity";
import "@antv/x6-vue-shape";

const x6VueShape = "vue-shape";
export default {
  name: "xsix",
  data() {
    return {
      graphData: {
        nodes: "",
        edges: "",
      },
      baseGraph: {},
      refulData: [],
      ports: {
        groups: {
          top: {
            position: "top",
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
          bottom: {
            position: "bottom",
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
        },
        items: [
          {
            // id: 'port1',
            group: "top",
          },
          // {
          //   group: 'right'
          // },
          {
            // id: 'port2',
            group: "bottom",
          },
          // {
          //   group: 'left'
          // }
        ],
      },
    };
  },
  created() {
    this.calRenderData();
  },
  mounted() {
    const that = this;
    setTimeout(() => {
      this.baseGraph = new BaseGraph({
        container: document.getElementById("refContainer"),
      });
      /** 渲染画布内容 */
      console.log("that.graphData", that.graphData);
      this.baseGraph.fromJSON(that.graphData);
      this.baseGraph.registerEvent([
        { eventName: "edge:dblclick" },
        { eventName: "node:mouseenter" },
        // { eventName: "cell:mouseenter" },
      ]);
    }, 100);
  },
  methods: {
    calRenderData() {
      this.graphData.nodes = mockEntityData.map((entity, index) => {
        const { entityId, width, height, x, y } = entity;
        return {
          x: x
            ? x
            : index >= 1
            ? (index - 1 + 1) * LINE_HEIGHT
            : (index + 1) * LINE_HEIGHT,
          y: y ? y : index >= 1 ? 500 : 150,
          width,
          height,
          id: entityId,
          shape: x6VueShape,
          component: {
            template: '<Entity :entity="entity"/>',
            data() {
              return {
                entity: entity,
              };
            },
            components: {
              Entity,
            },
          },
          ports: this.ports,
        };
      });

      this.graphData.edges = mockRelationData.map((relation) => {
        const { relationId, sourceEntityId, targetEntityId, label } = relation;
        return {
          id: relationId,
          source: sourceEntityId,
          target: targetEntityId,
          label,
          data: relation,
        };
      });
    },
    saveJson() {
      // const cells = this.baseGraph.toJSON();
      this.refulData = this.baseGraph.toJSON();
      // let len = cells.cells.length;
      // for (let i = 0; i < len; i++) {
      //   if (mockEntityData[i].entityId == cells.cells[i].id) {
      //     mockEntityData[i].x = cells.cells[i].position.x;
      //     mockEntityData[i].y = cells.cells[i].position.y;
      //   }
      // }
    },
    clean() {
      this.baseGraph.clearCells();
    },
    reful() {
      this.baseGraph.fromJSON(this.refulData);
    },
  },
};
</script>
<style scoped lang="less">
.er-editor-demo-container {
  width: 100%;
  height: 700px;
  background-color: #fafafa;

  .minimap-container {
    position: absolute;
    top: 10px;
    right: 10px;

    /** X6推荐覆写样式 */
    .x6-widget-minimap {
      .x6-graph {
        box-shadow: 0 0 0 0 #ffffff;
      }

      .x6-widget-minimap-viewport {
        border: 1px solid rgba(0, 0, 0, 0.1);

        .x6-widget-minimap-viewport-zoom {
          border: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}
</style>